<!DOCTYPE html>
<!-- 算机2203张肖冉 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熙心健康体检系统 - 体检预约</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
        }

        
        .sidebar {
            width: 220px;
            background-color: #2f3b4b;
            color: #fff;
            min-height: 135vh;
            float: left;
        }

        .sidebar-header {
            padding: 20px;
            font-size: 18px;
            background-color: #242e3b;
        }

        .sidebar-nav ul {
            list-style: none;
        }

        .sidebar-nav li {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .sidebar-nav li:hover {
            background-color: #3a4756;
        }

        .sidebar-nav li.active {
            background-color: #1f2730;
        }

        .sidebar-nav a {
            color: #fff;
            text-decoration: none;
        }

        /* 主内容区样式 */
        .main-content {
            margin-left: 220px;
            padding: 20px;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .breadcrumb {
            font-size: 14px;
            color: #666;
        }

        .header-buttons .btn {
            margin-left: 10px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn.primary {
            background-color: #009688;
            color: #fff;
        }

        .btn.default {
            background-color: #ccc;
            color: #333;
        }

        .form-section {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }

        .form-fields {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .field-group {
            display: flex;
            flex-direction: column;
            width: calc(33.333% - 20px);
        }

        .field-group.full-width {
            width: 100%;
        }

        .field-group label {
            margin-bottom: 5px;
            font-size: 14px;
            color: #666;
        }

        .field-group input,
        .field-group select {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .hospital-desc p {
            margin: 5px 0;
            font-size: 14px;
            color: #666;
        }

        .package-table {
            width: 100%;
            border-collapse: collapse;
        }

        .package-table th,
        .package-table td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        .package-table th {
            background-color: #f5f7fa;
        }
    </style>
</head>
<body>
    <div class="health-check-appointment">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">熙心健康体检系统</div>
            <nav class="sidebar-nav">
                <ul>
                    <li>首页</li>
                    <li class="active">体检预约</li>
                    <li>预约列表</li>
                    <li>体检客户查询</li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容 -->
        <main class="main-content">
            <header class="page-header">
                <div class="breadcrumb">预约 / 体检预约</div>
                <div class="header-buttons">
                    <button class="btn primary" onclick="submitForm()">预约</button>
                    <button class="btn default" onclick="resetForm()">清空</button>
                </div>
            </header>

            <!-- 基本信息 -->
            <section class="form-section">
                <h2 class="section-title">基本信息</h2>
                <div class="form-fields">
                    <div class="field-group">
                        <label>体检单号</label>
                        <input type="text" id="examNo" value="20231008" placeholder="20231008">
                    </div>
                    <div class="field-group">
                        <label>姓名</label>
                        <input type="text" id="name" placeholder="输入姓名">
                    </div>
                    <div class="field-group">
                        <label>性别</label>
                        <select id="gender">
                            <option value="">选择性别</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label>手机号</label>
                        <input type="text" id="phone" placeholder="输入手机号">
                    </div>
                    <div class="field-group">
                        <label>出生日期</label>
                        <input type="date" id="birthday">
                    </div>
                    <div class="field-group">
                        <label>身份证号</label>
                        <input type="text" id="idCard" placeholder="输入身份证号">
                    </div>
                    <div class="field-group full-width">
                        <label>家庭住址</label>
                        <input type="text" id="address" placeholder="输入通讯地址">
                    </div>
                </div>
            </section>

            <!-- 预约信息 -->
            <section class="form-section">
                <h2 class="section-title">预约信息</h2>
                <div class="form-fields">
                    <div class="field-group">
                        <label>预约院区</label>
                        <select id="hospitalArea" onchange="showHospitalDesc()">
                            <option value="">选择院区地址</option>
                            <option value="shenyang">沈阳康熙云医院-浑南院区</option>
							 <option value="shenyang">沈阳康熙云医院-三好街院区</option>
							  <option value="shenyang">沈阳康熙云医院-世纪大厦</option>
							       
                        </select>
                    </div>
                    <div class="field-group full-width" id="hospitalDesc" style="display: none;">
                        <label>院区描述</label>
                        <div class="hospital-desc" id="descContent">
                            <p>营业时间：周一至周六 7:30-11:30</p >
                            <p>采血截止：10:30</p >
                            <p>联系电话：4006297568</p >
                            <p>地址：沈阳市浑南区创新路175号(智慧大街交汇处)</p >
                        </div>
                    </div>
                </div>
            </section>

            <!-- 预约详情 -->
            <section class="form-section">
                <h2 class="section-title">预约详情</h2>
                <div class="form-fields">
                    <div class="field-group">
                        <label>预约类型</label>
                        <select id="type">
                            <option value="">预约类型</option>
                            <option value="group">团体预约</option>
                            <option value="individual">个检预约</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label>预约套餐</label>
                        <select id="package">
                            <option value="">预约套餐</option>
                            <option value="packageA">23东软家属已婚女士套餐A</option>
							<option value="packageB">23东软家属已婚女士套餐B</option>
							<option value="packageC">23东软家属已婚女士套餐C</option>
							<option value="packageD">23东软家属已婚女士套餐D</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label>体检时间</label>
                        <input type="date" id="examDate">
                    </div>
                    <div class="field-group">
                        <label>体检时段</label>
                        <select id="timeSlot">
                            <option value="">体检时段</option>
                            <option value="morning">上午</option>
							<option value="afternoon">下午</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label>套餐价格</label>
                        <input type="number" id="packagePrice" value="1500" placeholder="1500">
                    </div>
                    <div class="field-group">
                        <label>优惠补贴</label>
                        <input type="number" id="subsidy" value="400" placeholder="400">
                    </div>
                    <div class="field-group">
                        <label>结算金额</label>
                        <input type="number" id="amount" value="1100" placeholder="1100">
                    </div>
                    <div class="field-group">
                        <label>结算类别</label>
                        <select id="settlementType">
                            <option value="">结算类别</option>
                            <option value="alipay">支付宝</option>
                            <option value="wechat">微信</option>
							<option value="insurance">医保</option>
							<option value="cash">现金</option>
							<option value="bankcard">银行卡</option>
							
                        </select>
                    </div>
                </div>
            </section>

            <!-- 套餐详情 -->
            <section class="form-section">
                <h2 class="section-title">套餐详情</h2>
                <table class="package-table">
                    <thead>
                        <tr>
                            <th>检查项目</th>
                            <th>检查内容</th>
                            <th>检查意义</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>肺部CT</td>
                            <td>CT检查【肺部-平扫】</td>
                            <td>用于检查肺部有无良性恶性肿瘤，结核，炎症和间质性，弥漫性病变等。</td>
                        </tr>
                        <tr>
                            <td>头部CT</td>
                            <td>头颅骨CT</td>
                            <td>CT检查头部影像</td>
                        </tr>
                        <tr>
                            <td>肿瘤两项</td>
                            <td>癌胚抗原测定(定量),甲胎蛋白测定</td>
                            <td>癌胚抗原：系广谱性肿瘤标志物，对大肠癌、胰腺癌的筛查、疗效观察和预后评估有重要的临床意义。在胃、乳腺、肺癌等也可升高。甲胎蛋白：对原发性肝癌的诊断、疗效观察和预后评估有重要的临床意义。在卵巢、胃、胰腺癌、睾丸癌等肿瘤及肝炎、肝硬化等疾病也有异常发现。孕期可出现升高。</td>
                        </tr>
                        <tr>
                            <td>C13呼气试验</td>
                            <td>C13呼气试验</td>
                            <td>空腹，一个月以内使用过抗生素和胃药者不宜做此检查。13碳-尿素呼气试验阳性示有幽门螺杆菌感染，它与胃部炎症、消化性溃疡、胃癌的发生密切关联。</td>
                        </tr>
                        <tr>
                            <td>甲功三项</td>
                            <td>血清游离甲状腺素测定</td>
                            <td>判断甲状腺功能，鉴别免疫性疾病</td>
                        </tr>
						<tr>
						    <td>颈动脉彩超</td>
						    <td>彩色多普勒超声检查【颈动脉】</td>
						    <td>通过彩色超声仪器采用无创性检查方法，检测颈动脉结构和动脉粥样硬化斑形态、范围、性质、动脉狭窄程度等:早期发现动脉血管病变，为有效预防和减少冠心病、缺血性脑血管病等心脑血管疾病发病提供客观的血流动力学依据.</td>
						</tr>
                    </tbody>
                </table>
            </section>
        </main>
    </div>

    
</body>
</html>